@import './Global.less';

@ROOTWIDTH:700px;
@ROOTHEIGHT:500px;

.root
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:@ROOTWIDTH;
    height:@ROOTHEIGHT;
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none; 

    >div
    {
        box-sizing:border-box;
    }

    >.saveButton
    {
        z-index: 1;
        flex-grow: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        width:8rem;
        font-size:1.8rem;
        line-height: 1.5;
        border-left:1px solid @BorderGrey;
        border-right:1px solid @BorderGrey;
        background: white;
        cursor: pointer;
        -moz-user-select:none; /*火狐*/
        -webkit-user-select:none; /*webkit浏览器*/
        -ms-user-select:none; /*IE10*/
        -khtml-user-select:none; /*早期浏览器*/
        user-select:none;
        box-sizing: content-box;

        &:hover
        {
            border-left:2px solid @InteractBlue;
            border-right:2px solid @InteractBlue;

            &::before
            {
                content:'';
                position: absolute;
                // width:100%;
                // height: 100%;
                left:0;
                right:0;
                top:-2px;
                bottom:-2px;
                border-top:2px solid white;
                border-bottom:2px solid white;
            }
        }

        >svg
        {
            width:1.8rem;
            height:1.8rem;
            fill:currentColor;
        }
    }
}